<div class="p-3 bg-white">
  <h1 class="h3 m-0">General</h1>
</div>
<div class="p-3 relative">
  <div class="row">
    <div class="col-md-6">
      <div class="card mb-3">
        <div class="card-header">Alerts</div>

        <div class="card-body">
          <div class="alert alert-success alert-dismissable">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            <strong>Well done!</strong> You successfully read this important alert message.
          </div>
          <div class="alert alert-info alert-dismissable">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
          </div>
          <div class="alert alert-warning alert-dismissable">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            <strong>Warning!</strong> Best check yo self, you're not looking too good.
          </div>
          <div class="alert alert-danger alert-dismissable">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            <strong>Oh snap!</strong> Change a few things up and try submitting again.
          </div>
          <div class="alert alert-success alert-bordered alert-dismissable alert-line">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            <strong>Well done!</strong> You successfully read this important alert message.
          </div>
          <div class="alert alert-info alert-bordered alert-dismissable alert-line">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
          </div>
          <div class="alert alert-warning alert-bordered alert-dismissable alert-line">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            <strong>Warning!</strong> Best check yo self, you're not looking too good.
          </div>
          <div class="alert alert-danger alert-bordered alert-dismissable alert-line">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            <strong>Oh snap!</strong> Change a few things up and try submitting again.
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="row">
        <div class="col-md-12">
          <div class="card mb-3">
            <div class="card-header">Labels & Badges</div>
            <div class="card-body">
              <div class="mb-2">
                <a href="#" class="badge badge-primary">Primary</a>
                <a href="#" class="badge badge-secondary">Secondary</a>
                <a href="#" class="badge badge-success">Success</a>
                <a href="#" class="badge badge-danger">Danger</a>
                <a href="#" class="badge badge-warning">Warning</a>
                <a href="#" class="badge badge-info">Info</a>
                <a href="#" class="badge badge-light">Light</a>
                <a href="#" class="badge badge-dark">Dark</a>
              </div>
              <div class="mb-2">
                <span class="badge badge-primary">Primary</span>
                <span class="badge badge-secondary">Secondary</span>
                <span class="badge badge-success">Success</span>
                <span class="badge badge-danger">Danger</span>
                <span class="badge badge-warning">Warning</span>
                <span class="badge badge-info">Info</span>
                <span class="badge badge-light">Light</span>
                <span class="badge badge-dark">Dark</span>
              </div>
              <div class="mb-2">
                <span class="badge badge-pill badge-primary">Primary</span>
                <span class="badge badge-pill badge-secondary">Secondary</span>
                <span class="badge badge-pill badge-success">Success</span>
                <span class="badge badge-pill badge-danger">Danger</span>
                <span class="badge badge-pill badge-warning">Warning</span>
                <span class="badge badge-pill badge-info">Info</span>
                <span class="badge badge-pill badge-light">Light</span>
                <span class="badge badge-pill badge-dark">Dark</span>
              </div>
              <div class="mb-2">
                <h1>Example heading <span class="badge badge-secondary">New</span></h1>
                <h2>Example heading <span class="badge badge-secondary">New</span></h2>
                <h3>Example heading <span class="badge badge-secondary">New</span></h3>
                <h4>Example heading <span class="badge badge-secondary">New</span></h4>
                <h5>Example heading <span class="badge badge-secondary">New</span></h5>
                <h6>Example heading <span class="badge badge-secondary">New</span></h6>
              </div>

            </div>
          </div>
        </div>
        <div class="col-md-12">
          <div class="card mb-3">
            <div class="card-header">Progress bars</div>

            <div class="card-body">

              <div class="progress mb-3"><span class="progress-bar" style="width: 0"></span></div>
              <div class="progress mb-3"><span class="progress-bar" style="width: 25%"></span></div>
              <div class="progress mb-3"><span class="progress-bar" style="width: 75%"></span></div>

              <div class="progress progress-xs mb-3"><span class="progress-bar bg-success" style="width: 10%"></span></div>
              <div class="progress mb-3"><span class="progress-bar bg-success" style="width: 25%"></span></div>
              <div class="progress mb-3"><span class="progress-bar bg-danger" style="width: 75%"></span></div>
              <div class="progress mb-3"><span class="progress-bar" style="width: 100%"></span></div>

              <div class="progress mb-3"><span class="progress-bar progress-bar-striped" style="width: 10%"></span></div>
              <div class="progress mb-3"><span class="progress-bar progress-bar-striped bg-success" style="width: 25%"></span></div>
              <div class="progress mb-3"><span class="progress-bar progress-bar-striped bg-info" style="width: 50%"></span></div>
              <div class="progress mb-3"><span class="progress-bar progress-bar-striped bg-warning" style="width: 75%"></span></div>
              <div class="progress mb-3"><span class="progress-bar progress-bar-striped bg-danger" style="width: 100%"></span></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="card mb-3">
        <div class="card-header">Breadcumb</div>

        <div class="card-body">
          <ol class="breadcrumb">
            <li class="breadcrumb-item active">Home</li>
          </ol>
          <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item active">Library</li>
          </ol>
          <ol class="breadcrumb" style="margin-bottom: 5px;">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item"><a href="#">Library</a></li>
            <li class="breadcrumb-item active">Data</li>
          </ol>
        </div>
      </div>
    </div>
  </div>
</div>
